<template>
  <div>
    <div id="bottomLeftChart" style="width: 9.25rem; height: 6.25rem"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
// import "echarts-gl";
export default {
  data() {
    return {
      chart: null,
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(
        document.getElementById("bottomLeftChart")
      );
      console.log(
        JSON.stringify(
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#956FD4" },
            { offset: 1, color: "#3EACE5" },
          ])
        )
      );
      let option = {
        color: [
          "#7cb5ec",
          "#434348",
          "#90ed7d",
          "#f7a35c",
          "#8085e9",
          "#f15c80",
          "#e4d354",
          "#8085e8",
          "#8d4653",
          "#91e8e1",
        ],
        title: {
          text: "3D堆叠柱状图",
          x: "center",
        },
        tooltip: {},
        xAxis3D: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6"],
          axisLine: {
            lineStyle: {
              color: "yellow",
              width: 2,
            },
          },
        },
        yAxis3D: {
          type: "category",
          data: ["a", "b", "c", "d", "e", "f"],
          axisLine: {
            lineStyle: {
              color: "yellow",
              width: 2,
            },
          },
        },
        zAxis3D: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "yellow",
              width: 2,
            },
          },
        },
        grid3D: {
          boxWidth: 60,
          boxDepth: 60,
          axisPointer: {
            show: false,
          },
          light: {
            main: {
              intensity: 1.2,
            },
            ambient: {
              intensity: 0.3,
            },
          },
          viewControl: {
            // alpha: 10, //控制场景平移旋转
            // beta: 20,
            // minAlpha: 10,
            // maxAlpha: 10,
            // minBeta: 20,
            // maxBeta: 20,
          },
        },
        series: [
          {
            type: "bar3D",
            name: "1",
            barSize: 10,
            data: [
              [0, 0, 20],
              [1, 1, 120],
              [2, 2, 100],
              [3, 3, 600],
              [4, 4, 600],
              [5, 5, 90],
            ],
            stack: "stack",
            shading: "lambert",
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          //   {
          //     type: "bar3D",
          //     name: "2",
          //     barSize: 15,
          //     data: [
          //       [1, 0, 12000],
          //       [3, 0, 60000],
          //       [5, 0, 12000],
          //     ],
          //     // stack: 'stack',
          //     shading: "lambert",
          //     emphasis: {
          //       label: {
          //         show: true,
          //       },
          //     },
          //   },
        ],
      };
      this.chart.setOption(option);
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>

<style lang="scss" scoped>
</style>